<template>
	<view style="overflow: auto;">
		<view style="height: 20rpx;"></view>
		<view class="card">
		  <view class="card-content">
		    <view class="image-container">
		      <image class="imagg" :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.memberUserPhoto"></image>
		    </view>
		    <view class="details">
				<view class="details-row">
				  <view class="label">预约时间：<span>{{item.reservationTime}}</span><span style="margin-left:4px;">{{item.trainingTime}}</span></view>
				</view>
				<view class="details-row">
				  <view class="label">课程名称：{{item.fitnessPlanName}}</view>
				</view>
		      <view class="details-row">
		        <view class="label">学员姓名：{{item.memberUserRealName}}</view>
		      </view>
		      <view class="details-row">
		        <view class="label">教练姓名：{{item.coachName}}</view>
		      </view>
		    </view>
		  </view>
		</view>
		<view style="width: 90%;margin: 0 auto;display: flex;align-items: center;margin-bottom: 20rpx;"><!-- justify-content: center; -->
				<u-icon name="calendar" size="60rpx" color="#000000"></u-icon>
				<text style="font-size: 32rpx;">选择日期</text>
		</view>
		<view class="calendar">
		  <view class="calendar-header">
		    <view class="calendar-prev" @click="prevMonth">上个月</view>
		    <view class="calendar-title">{{ year }}年{{ month }}月</view>
		    <view class="calendar-next" @click="nextMonth">下个月</view>
		  </view>
		  <view class="calendar-body">
		    <view class="calendar-weekdays">
		      <view
		        class="calendar-weekday"
		        v-for="(weekday, index) in weekdays"
		        :key="index"
		      >
		        {{ weekday }}
		      </view>
		    </view>
		    <view class="calendar-dates">
		      <!-- <view
		        class="calendar-date"
		        v-for="(date, index) in dates"
		        :key="index"
		        :class="{ 'calendar-date-today': isToday(date), 'calendar-date-selected': isSelected(date) }"
		        @click="selectDate(date)"
		      >
		        {{ date.day || '' }}
		      </view> -->
			  <view v-if="date==null" v-for="(date, index) in dates" :key="index" class="calendar-date">
				  
			  </view>
			  <view v-if="date!=null&&date.status==1"
			  	class="calendar-date1"
			  	v-for="(date, index) in dates"
			  	:key="index"
			  	>
			  	{{ date.day || '' }}
			  </view>
			  <view v-if="date!=null&&date.status==0"
				class="calendar-date"
				v-for="(date, index) in dates"
				:key="index"
				:class="{ 'calendar-date-selected': isSelected(date) }"
		        @click="selectDate(date)">
				<text v-if="date.isFull==0">{{ date.day || '' }}</text>
				<text v-if="date.isFull==1" class="full">满</text>
			  </view>
			  
		    </view>
		  </view>
		</view>
		<view style="width: 90%;margin: 0 auto;display: flex;align-items: center;margin-bottom: 10rpx;margin-top: 20rpx;"><!-- justify-content: center; -->
				<u-icon name="calendar" size="60rpx" color="#000000"></u-icon>
				<text style="font-size: 32rpx;">选择时间</text>
		</view>
		<view style="width: 100%;overflow: inherit;">
			<view v-for="item in dateData" style="width: 33%;height: 80px;float: left;">
				<view  class="time-bottom" :class="{ 'time-bottom-selected': timeSelected(item) }" @click="selectTime(item)" v-if="item.courseId<1">
					<view style="display: flex;align-items: center;justify-content: center;margin:2px;font-weight: 600;margin-bottom: 5px;"> {{item.trainingTime}}</view>
					<view style="display: flex;align-items: center;justify-content: center;margin:2px;font-size: 26rpx;">
						<!-- <text style="color: #F03737;" v-if="i.isclick==1" class="yueman">约满</text> -->
						<!-- <text class="keyue">可约</text> -->
					</view>
				</view>
				<view  class="time-bottom-1" v-if="item.courseId>0" @click="statuspanduan(item)">
					<view style="display: flex;align-items: center;justify-content: center;margin:2px;font-weight: 600;margin-bottom: 5px;"> {{item.trainingTime}}</view>
					<view style="display: flex;align-items: center;justify-content: center;margin:2px;font-size: 26rpx;">
						<text class="yueman">约满</text>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100vw;height: 10px;"></view>
		<view v-if="selectedTime.trainingTime" style="width: 100vw;">
			<view style="display: flex;align-items: center;justify-content: center;margin:2px;font-size: 26rpx;">
				预约时间:<span style="text-indent: 5px;">{{selectedDate}}</span><span style="text-indent: 5px;">{{selectedTime.trainingTime}}</span>
			</view>
			<view @click="reservationPlan()" style="width: 200px;height: 40px;background-color: #6EE7F0;margin: 0 auto;border-radius: 5px;display: flex;align-items: center;justify-content: center;">
				<text style="letter-spacing: 5px;font-size: 34rpx;color: #fff;">申请预约</text>
			</view>
		</view>
		<u-popup :show="show" mode="center"  @close="close" @open="open" closeable="true" :safeAreaInsetBottom="false">
			<view class="card" style="margin-top:30px">
			  <view class="card-content">
			    <view class="image-container">
			      <image class="imagg" :src="'http://101.43.223.224:8765/image/getImageById?id=' + reservationInfo.memberUserPhoto"></image>
			    </view>
			    <view class="details">
					<view class="details-row">
					  <view class="label">预约时间：<span>{{reservationInfo.reservationTime}}</span><span style="margin-left:4px;">{{reservationInfo.trainingTime}}</span></view>
					</view>
					<view class="details-row">
					  <view class="label">课程名称：{{reservationInfo.fitnessPlanName}}</view>
					</view>
			      <view class="details-row">
			        <view class="label">学员姓名：{{reservationInfo.memberUserRealName}}</view>
			      </view>
			      <view class="details-row">
			        <view class="label">教练姓名：{{reservationInfo.coachName}}</view>
			      </view>
			    </view>
			  </view>
			</view>
			<view style="width: 90%;height:40px;background-color:rgb(60, 156, 255);border-radius: 5px;display: flex;align-items: center;justify-content: center;color: #fff;margin: 0 auto;margin-bottom:10px;" @click="cancelReservation()" v-if="status !=2">
				取消预约
			</view>
		</u-popup>
		<view style="height: 40px;"></view>
	</view>
  
</template>
 
<script>
  export default {
    name: "calendar",
    data() {
      return {
		  item:{},
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        weekdays: [ "一", "二", "三", "四", "五", "六","日"],
        selectedDate: '2023-12-04',
		dateData:[
				
			],
		selectedTime:{},
		show:false,
		reservationInfo:{},
		status:''
		
      };
    },
	onLoad(option) {
		this.item = JSON.parse(option.item) //打印出上个页面传递的参数。
		this.getToday()
		this.getReservationTime()
	},
    computed: {
      dates() {
        const today = new Date();
        const firstDayOfMonth = new Date(this.year, this.month - 1, 1);
        const lastDayOfMonth = new Date(this.year, this.month, 0);
		const todayyear = today.getFullYear();
		const todaymonth = today.getMonth() + 1;
		const todayday = today.getDate();
        const dates = [];
        for (let i = firstDayOfMonth.getDate(); i <= lastDayOfMonth.getDate(); i++) {
          const date = new Date(this.year, this.month - 1, i);
          const year = date.getFullYear();
          const month = date.getMonth() + 1;
          const day = date.getDate();
          const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
		  var isFull=0
		  for(let a=0;a<this.dateData.length;a++){
			if(this.dateData[a].time==formattedDate){
				let allIsclickZero = true;
				for(let b=0;b<this.dateData[a].tarin.length;b++){
					if(this.dateData[a].tarin[b].isclick==0){
						allIsclickZero = false;
						break;
					}
				}
				if(allIsclickZero==true){
					isFull=1
				}
			}
		  }
          if (todayyear>year-1&&todaymonth>month-1&&todayday>day) {
            dates.push({ datee: date, date: formattedDate, day: day,status:1 ,isFull:isFull});
          }else{
			dates.push({ datee: date, date: formattedDate, day: day,status:0 ,isFull:isFull});
		  }
        }
        
        for (let i = 1; i < firstDayOfMonth.getDay(); i++) {
          dates.unshift(null);
        }
        return dates;
      }


    },
    methods: {
		open(){
			
		},
		close(){
			this.show = false
		},
		statuspanduan(item){
			var ths=this
			uni.request({
				url: ths.URL+'vipPlan/selectResStatus',
				method: 'GET',
				data: {
					courseId:item.courseId,
					studentId:item.studentId,
					coachId:item.coachId
				},
				// userInfo:res.
				success: function(res) {
					if(res.data.data.data.reservationStatus == 2){
						ths.status = 2
						ths.openInfo(item)
					}else{
						ths.status = 0
						ths.openInfo(item)
					}
					if(ths.item.memberId == item.studentId){
						if(ths.item.id == item.courseId){
							if(ths.item.coachId == item.coachId){
								ths.openInfo(item)
								ths.status = 2
							}
						}
					}
				},
				fail: function(error) {
					// 处理请求失败
					console.error('角色查询失败,请检查网络');
				}
			})
		},
		openInfo(item) {
			var ths=this
			uni.request({
				url: this.URL+'vipPlan/selectReservationById',
				method: 'GET',
				data: {
					courseId:item.courseId
				},
				// userInfo:res.
				success: function(res) {
					if(res.data.code ==200){
						ths.reservationInfo = res.data.data
					}else{
						
					}
				},
				fail: function(error) {
					// 处理请求失败
					console.error('角色查询失败,请检查网络');
				}
			})
			ths.show = true
		},
		cancelReservation(){
			var ths = this;
			uni.showModal({
				title: "预约提示",
				content: "您确定取消"+"  " + ths.reservationInfo.memberUserRealName+"  " + "学员的训练吗",
				showCancel: true,
				confirmText: "确定",
				success: (res) => {
					if (res.confirm) {
						uni.request({
							url: this.URL+'vipPlan/cancelReservation',
							method: 'GET',
							data: {
								courseId: ths.reservationInfo.id,
								studentId: ths.reservationInfo.memberId,
							},
							// userInfo:res.
							success: function(res) {
								if(res.data.code ==200){
									ths.show = false
									ths.getToday()
									ths.getReservationTime()
								}else{
									
								}
							},
							fail: function(error) {
								// 处理请求失败
								console.error('角色查询失败,请检查网络');
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
			
					
				}
			});
		},
		reservationPlan(){
			var ths = this;
			uni.showModal({
				title: "预约提示",
				content: "您确定预约"+"  " + ths.selectedDate+"  "+ ths.selectedTime.trainingTime+"  "+ "时间段的训练吗",
				showCancel: true,
				confirmText: "确定",
				success: (res) => {
					console.log(ths.item)
					console.log(ths.selectedTime)
					if (res.confirm) {
						uni.request({
							url: this.URL+'vipPlan/reservationPlan',
							method: 'POST',
							data: {
								coachId: ths.item.coachId,
								courseId: ths.item.id,
								studentId: ths.item.memberId,
								reservationTime:ths.selectedDate,
								courseTime:ths.selectedTime.id
							},
							// userInfo:res.
							success: function(res) {
								if(res.data.code ==200){
									uni.reLaunch({
										url:'/pages/coach/home/anpai'
									})
								}else{
									
								}
							},
							fail: function(error) {
								// 处理请求失败
								console.error('角色查询失败,请检查网络');
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}

					
				}
			});
		},
		getReservationTime(){
			var ths = this;
			uni.request({
				url: this.URL+'vipPlan/selectReservationTime',
				method: 'GET',
				data: {
					coachId: ths.item.coachId,
					reservationTime:ths.selectedDate
				},
				// userInfo:res.
				success: function(res) {
					if(res.data.code==200){
						ths.dateData = res.data.data;
					}else {
						ths.dateData = []
					}
					
					
				},
				fail: function(error) {
					// 处理请求失败
					console.error('角色查询失败,请检查网络');
				}
			})
		},
		getToday(){
			const today = new Date();
			const year = today.getFullYear();
			const month = today.getMonth() + 1;
			const day = today.getDate();
			const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
			this.selectedDate=formattedDate
		},
      prevMonth() {
        if (this.month === 1) {
          this.year -= 1;
          this.month = 12;
        } else {
          this.month -= 1;
        }
      },
      nextMonth() {
        if (this.month === 12) {
          this.year += 1;
          this.month = 1;
        } else {
          this.month += 1;
        }
      },
	  timeSelected(item) {
		return (item===this.selectedTime)
	  },
	  selectTime(item) {
		  if(item.courseId<1){
			this.selectedTime = item;
			
		  }
		  
	  },
      isSelected(date) {
		  if(date==null){
			  return
		  }
        return this.selectedDate && this.selectedDate === date.date;
      },
      selectDate(date) {
		  if(date==null){
		  	return
		  }
        this.selectedDate = date.date;
		this.getReservationTime()
        this.$emit("select", new Date(this.year, this.month - 1, date.day));
      },
    },
  };
</script>
 
<style scoped>
  .calendar {
    width: 90vw;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 20px;
	box-shadow: 0 2px 10px #dfdfdf;
  }
 
  .calendar-header {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    font-weight: 600;
  }
 
  .calendar-title {
    text-align: center;
    flex: 1;
  }
 
  .calendar-prev,
  .calendar-next {
    cursor: pointer;
  }
 
  .calendar-body {
    display: flex;
    flex-direction: column;
  }
 
  .calendar-weekdays {
    display: flex;
  }
  .calendar-date-selected {
  	background-color: #6EE7F0;
  	color: rgb(255, 255, 255);
  	border-radius: 75rpx 75rpx 75rpx 75rpx;
  }
  .calendar-weekday {
    width: calc(100% / 7);
    padding: 8px;
    text-align: center;
    
    font-weight: 600;
  }
 
  .calendar-dates {
    display: flex;
    flex-wrap: wrap;
  }
 
  .calendar-date {
    width: calc(100% / 7);
	box-sizing: border-box;
    padding: 8px;
    text-align: center;
    cursor: pointer;
  }
 .calendar-date .full{
	 color: #F03737;
 }
 .calendar-date1 {
   width: calc(100% / 7);
 	box-sizing: border-box;
   padding: 8px;
   text-align: center;
   cursor: pointer;
   color: #b3b3b3;
 }
  .calendar-date-today {
    color: blue;
    font-weight: 600;
  }
 
  .calendar-date-selected {
    background-color: #6EE7F0;
    color: rgb(255, 255, 255);
  }
  .calendar-date-selected .full{
  	 color: white;
  }
  
  .card {
  	width: 90vw;
  	
  	background-color: #fff;
  	margin: 0 auto;
  	padding: 20rpx;
  	box-sizing: border-box;
  	box-shadow: 0 2px 10px #dfdfdf;
  	margin-bottom: 18px;
  }
  
  .card-header {
  	height: 50rpx;
  }
  
  .icon-container {
  	float: left;
  }
  .title {
  	float: left;
  }
  
  .time {
  	float: right;
  	color: #5C5C5C;
  	font-size: 25rpx;
  	margin-top: 5rpx;
  }
  
  .card-content {
  	width: 85vw;
  	margin: 0 auto;
  	height: 230rpx;
  	padding: 5px;
  	box-sizing: border-box;
  	margin-top: 10rpx;
  }
  
  .card-content2 {
  	width: 100%;
  	background-color: #F7F7F7;
  	margin: 0 auto;
  	height: 120rpx;
  	padding: 5px;
  	box-sizing: border-box;
  	margin-top: 10rpx;
  	color: #5C5C5C;
  }
  
  .image-container {
  	width: 160rpx;
  	height: 160rpx;
  	float: left;
  }
  .imagg {
  	width: 140rpx;
  	height: 140rpx;
	border-radius: 50%;
  	margin-top: 40rpx;
  }
  
  .details {
  	font-size: 26rpx;
  	float: left;
  	color: #5C5C5C;
  }
  
  .details-row {
  	height: 30rpx;
  	margin-top: 20rpx;
  }
  
  .label {
  	float: left;
  }
  .label-top{
	  float: left;
	  font-size: 36rpx;
	  color: black;
	  margin-bottom: 10rpx;
  }
.time-bottom{
	width: 95%;
	height: 60px;
	float: left;
	margin:0 auto;
	box-sizing: border-box;
	padding: 8px;
	box-shadow: 0 2px 10px #dfdfdf;
}
.time-bottom .keyue{
	 color: #6EE7F0;
}
.time-bottom-selected{
	width: 95%;
	height: 60px;
	float: left;
	margin:0 auto;
	box-sizing: border-box;
	padding: 8px;
	background-color: #6EE7F0;
	color: white;
	box-shadow: 0 2px 10px #dfdfdf;
}
.time-bottom-selected .keyue{
	color: white;
}
.time-bottom-1{
	width: 95%;
	height: 60px;
	float: left;
	margin:0 auto;
	box-sizing: border-box;
	padding: 8px;
	box-shadow: 0 2px 10px #dfdfdf;
	
	
}
.time-bottom-1 .yueman{
	color: #F03737;
}
</style>